<template>
  <div id="mouse"></div>
  <el-button type="primary" round id="btn"><el-icon>
      <Aim />
    </el-icon></el-button>
  <div id="map"></div>
</template>

<script setup>
import { app } from "../../main";
onMounted(() => {
  var TiandiMap_vec = new ol.layer.Tile({
    title: "天地图矢量图层",
    source: new ol.source.XYZ({
      url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=47eae3f291cf611edefaa89a8ffcd87f", //parent.TiandituKey()为天地图密钥,
      wrapX: false,
      crossOrigin: "Anonymous",  //解决导出图片跨域问题
    }),
  });
  var TiandiMap_cva = new ol.layer.Tile({
    title: "天地图矢量注记图层",
    source: new ol.source.XYZ({
      url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=47eae3f291cf611edefaa89a8ffcd87f", //parent.TiandituKey()为天地图密钥
      crossOrigin: "Anonymous", //解决导出图片跨域问题
    }),
  });
  var image = new ol.layer.Tile({
    title: "天地图影像层",
    source: new ol.source.XYZ({
      url: "http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=47eae3f291cf611edefaa89a8ffcd87f",
      wrapX: false,
      crossOrigin: "Anonymous", //解决导出图片跨域问题
    }),
  });
  var image_cva = new ol.layer.Tile({
    title: "天地图影像注记图层",
    source: new ol.source.XYZ({
      url: "http://t4.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=47eae3f291cf611edefaa89a8ffcd87f", //parent.TiandituKey()为天地图密钥
      crossOrigin: "Anonymous", //解决导出图片跨域问题
    }),
  });
  const docLayer = new Zondy.Map.Doc("", "guanggu", {
    ip: "localhost",
    port: 6163,
    crossOrigin: "Anonymous", //解决导出图片跨域问题
  });
  let map = new ol.Map({
    target: "map",
    layers: [TiandiMap_vec, TiandiMap_cva, image, image_cva, docLayer],
    view: new ol.View({
      projection: "EPSG:4326",
      center: [114.38, 30.50],
      zoom: 13,
    }),
  });
  /* 地图控件 */
  const navControl = new ol.control.ZoomToExtent({
    extent: [100, 30, 140, 30],
  });
  map.addControl(navControl);
  /* 鼠标位置控件 */
  var mouse = document.getElementById("mouse");
  map.on("pointermove", (evt) => {
    mouse.innerHTML = evt.coordinate;
  });
  /* 复位地图 */
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    map.getView().setCenter([114.38, 30.49]); // 复位中心位
  });
  app.provide("$map", map);
  app.provide("$docLayer", docLayer)
});
</script>

<style lang="scss" scoped>
#map {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 90px);
}

#mouse {
  float: left;
  position: absolute;
  bottom: 5px;
  width: 200px;
  height: 20px;
  z-index: 2000;
  color: black;
}

#btn {
  position: absolute;
  top: 200px;
  margin-left: 2px;
  z-index: 1000;
}
</style>
